<template>
	<div>
		<div style="width: 100%;height: 500px;border: 1px solid black;position: relative;overflow: hidden;" ref="totalBox">
			<div class="container-swiper" ref="cont">
				<section v-for="item in arrImage" class="itemBox" style="background: salmon;margin:0 auto;height: 500px;width: 100%;overflow: hidden;">
					<img :src="item" style="width: 100%;display:block;height: 100%" />
				</section>
			</div>
			<div class="container-focus">
				<section style="display: flex;flex-direction:column;width: 100%;align-items: center;justify-content: center;" ref="focusBox">
					<span ref="bullet" class="normalClass" v-for="(item,index) in arrBullets" @mouseover="switchImage(index)">
						{{item}}
					</span>
				</section>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      //图片数据或路径
      arrImage: [
  		'../../static/image/bd32091ea0e58b5e3e8dd6b9bb843307.jpg',
				'../../static/image/willian-justen-de-vasconcellos-558963-unsplash.jpg',
				'../../static/image/意大利五渔村美丽的海景4k高清壁纸_彼岸图网.jpg',
				'../../static/image/field_sunset_grass_129566_1600x900.jpg',
				'../../static/image/bd32091ea0e58b5e3e8dd6b9bb843307.jpg'
			
      ],
      //焦点具体信息标题
      arrBullets: ["这回", "应该", "是", "真的", "可以了吧"],
      Index: 0
    };
  },
  created() {},
  mounted() {
    //		let itemBoxT=document.getElementsByClassName('itemBox')
    //		var img = new Image()
    //		if(img.complete){
    //			console.info(itemBoxT[0].getElementsByTagName('img')[0].clientHeight)
    //		}
    //		for(var i in this.arrImage){
    //
    //			itemBoxT[i].getElementsByTagName('img')[0].style.marginTop=itemBoxT[i].getElementsByTagName('img')[0].clientHeight*(-0.5)+'px'
    //		}
    this.$refs.bullet[this.Index].classList.add("activeClass");
    var timer = setInterval(() => {
      this.Index = this.Index + 1;
      if (this.Index == this.arrBullets.length) {
        this.Index = 0;
      }
      this.$refs.cont.style.top =
        this.$refs.totalBox.clientHeight * this.Index * -1 + "px";
      for (var i in this.arrImage) {
        this.$refs.bullet[i].classList.remove("activeClass");
      }
      this.$refs.bullet[this.Index].classList.add("activeClass");
    }, 3500); //轮播图时间周期
    this.$refs.focusBox.addEventListener("mouseover", function() {
      clearInterval(timer);
    });
    let that = this;
    this.$refs.focusBox.addEventListener("mouseleave", () => {
      timer = setInterval(() => {
        that.Index = that.Index + 1;
        if (that.Index == that.arrBullets.length) {
          that.Index = 0;
        }
        that.$refs.cont.style.top =
          that.$refs.totalBox.clientHeight * that.Index * -1 + "px";
        for (var i in this.arrImage) {
          that.$refs.bullet[i].classList.remove("activeClass");
        }
        that.$refs.bullet[that.Index].classList.add("activeClass");
      }, 3500);
    });
    //		clearInterval(timer)
  },
  methods: {
    moveImage() {
      //			clearInterval(timer)
    },
    switchImage(data) {
      this.$refs.cont.style.top =
        this.$refs.totalBox.clientHeight * data * -1 + "px";
      this.Index = data;
      for (var i in this.arrImage) {
        this.$refs.bullet[i].classList.remove("activeClass");
      }
      this.$refs.bullet[data].classList.add("activeClass");
    }
  }
};
</script>

<style >
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-swiper {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.container-focus {
  /*display: flex;
		justify-content: flex-start;
		align-items: center;*/
  position: absolute;
  background: rgba(0, 0, 0, 0.35);
  width: 300px;
  height: 260px;
  bottom: 80px;
  right: 200px;
}
.activeClass {
  height: 80px !important;
  font-size: 18px !important;
  color: white !important;
}
.normalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 45px;
  cursor: pointer;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  border-bottom: 1px solid rgba(218, 218, 218, 0.8);
  color: rgba(218, 218, 218, 0.8);
}
.normalClass:nth-last-child(1) {
  border-bottom: 0 solid rgba(218, 218, 218, 0.8);
}
*{
	margin: 0;
	padding: 0;
}
</style>